<template>
  <div class="n" :model="form">
    <h3>昵称</h3>
    <van-field
      size="large"
      style="border-bottom: 1px solid gainsboro"
      v-model="form.uname"
      placeholder="请填写"
    />

    <h3>性别</h3>

    <van-field name="radio">
      <template #input>
        <van-radio-group
          v-model="form.sex"
          direction="horizontal"
          style="font-size: 20px; margin-top: 20px"
        >
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <h3>出生日期</h3>
    <van-field
      readonly
      clickable
      style="border-bottom: 1px solid gainsboro"
      name="datetimePicker"
      :value="value"
      placeholder="请选择"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="form.birthday"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <van-button type="default" class="btn" @click="next">下一步</van-button>
  </div>
</template>

<script>
import moment from "moment";
import { Toast } from "vant";
import httpApi from "@/http";
export default {
  data() {
    return {
      form: {
        uid: this.$route.params.id,
        uname: "",
        sex: "",
        birthday: "",
      },
      name: "",
      radio: "1",
      value: "",
      date: "",
      showPicker: false,
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2000, 1, 1),
    };
  },
  methods: {
    onConfirm(date) {
      // // console.log(date)
      this.value = moment(date).format("YYYY-MM-DD");
      this.form.birthday = this.value;
      this.showPicker = false;
    },
    next() {
      // console.log(this.form);
      if (this.form.uname && this.form.sex && this.form.birthday) {
        httpApi.userApi.information(this.form).then((res) => {
          // console.log(res);
          if(res.data.code == 200){
            this.$router.push(`/tz/${this.form.uid}`)
          }
        });
      } else {
        Toast({
          message: "请填写完整信息",
          position: "bottom",
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.n {
  margin: 50px 20px 0;

  h3 {
    margin: 50px 10px 10px;
  }
}

.btn {
  position: absolute;
  bottom: 60px;
  left: 35px;
  width: 80%;
  background-color: #9c8be9;
  color: white;
}
</style>
